import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Form, Input, Button, Typography, Row, Col, message, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { registerApi } from '../../api/user';
import registerImage from '../../imgs/bc.png'; // 请确保这个图片存在，或替换为您实际的图片
import './index.scss';

const { Title, Text } = Typography;

const Register = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = React.useState(false);
  const navigate = useNavigate()
  const onFinish = async (values) => {
    setLoading(true)
    try {
      const res = await registerApi(values)
      if(res.data.status === 0) {
        message.open({
          type: 'success',
          content: '注册成功',
          duration: 3,
        });
        
        setTimeout(() => {
          navigate('/login')
        }, 2000);
      } else {
        message.open({
          type: 'error',
          content: res.data.message,
          duration: 3,
        });
      }
    } catch (error) {
      message.open({
        type: 'error',
        content: '注册失败，请稍后重试',
        duration: 3,
      });
    } finally {
      setLoading(false)
    }
  };

  return (
    <div className="register-container">
      <Card className="register-card">
        <Row gutter={24} align="middle">
          {/* 左侧图片区域 */}
          <Col xs={0} sm={0} md={12} className="register-image-container">
            <img 
              src={registerImage} 
              alt="注册页面" 
              className="register-image"
            />
          </Col>
          
          {/* 右侧表单区域 */}
          <Col xs={24} sm={24} md={12} className="register-form-container">
            <Title 
              level={3} 
              className="register-title"
            >
              用户注册
            </Title>
            
            <Form
              form={form}
              name="register"
              onFinish={onFinish}
              scrollToFirstError
              layout="vertical"
              size="large" // 确保表单大小为 large
            >
              <Form.Item
                name="username"
                label={<span style={{ fontSize: '16px' }}>用户名</span>} // 增加标签字体大小
                rules={[
                  { required: true, message: '请输入用户名' },
                  { min: 4, message: '用户名至少4个字符' },
                  { max: 16, message: '用户名不能超过16个字符' }
                ]}
              >
                <Input
                  prefix={<UserOutlined style={{ fontSize: '16px' }} />} // 增加图标大小
                  placeholder="请输入用户名"
                  style={{ height: '50px' }} // 增加输入框高度
                />
              </Form.Item>

              <Form.Item
                name="password"
                label={<span style={{ fontSize: '16px' }}>密码</span>} // 增加标签字体大小
                rules={[
                  { required: true, message: '请输入密码' },
                  { min: 6, message: '密码至少6个字符' }
                ]}
              >
                <Input.Password
                  prefix={<LockOutlined style={{ fontSize: '16px' }} />} // 增加图标大小
                  placeholder="请输入密码"
                  style={{ height: '50px' }} // 增加输入框高度
                />
              </Form.Item>

              <Form.Item
                name="confirmPassword"
                label={<span style={{ fontSize: '16px' }}>确认密码</span>} // 增加标签字体大小
                dependencies={['password']}
                rules={[
                  { required: true, message: '请再次输入密码' },
                  ({ getFieldValue }) => ({
                    validator(_, value) {
                      if (!value || getFieldValue('password') === value) {
                        return Promise.resolve();
                      }
                      return Promise.reject(new Error('两次输入的密码不一致'));
                    },
                  }),
                ]}
              >
                <Input.Password
                  prefix={<LockOutlined style={{ fontSize: '16px' }} />} // 增加图标大小
                  placeholder="请再次输入密码"
                  style={{ height: '50px' }} // 增加输入框高度
                />
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  block
                  loading={loading}
                  className="register-button"
                >
                  立即注册
                </Button>
              </Form.Item>
            </Form>

            <div className="register-footer">
              <Text>
                已有账号？{' '}
                <Link to="/login" className="register-link">
                  返回登录
                </Link>
              </Text>
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default Register;